<template>
  <v-container
    fluid
  >
    <v-row justify="start">
      <v-col
        cols="12"
        md="8"
      >
        <material-card
          color="primary"
          full-header
        >
          <template #title>
            <v-alert
              :type="alertType"
              dense
              icon="mdi-ruler-square-compass"
            >
              {{ lanChar.ruleConfig.MCGroupRuleTitle }}
              <v-btn
                class="mx-0"
                fab
                icon
                x-small
                color="primary"
                @click="getGroupRules()"
              >
                <v-icon>mdi-cached</v-icon>
              </v-btn>
            </v-alert>
          </template>
          <v-simple-table>
            <thead>
              <tr>
                <th class="primary--text">
                  {{ lanChar.ruleConfig.MCGroupRuleName }}
                </th>
                <th class="primary--text">
                  {{ lanChar.ruleConfig.MCGroupRuleTcpUri }}
                </th>
                <th class="primary--text">
                  {{ lanChar.ruleConfig.MCGroupRuleUdpUri }}
                </th>
                <th class="primary--text">
                  {{ lanChar.ruleConfig.MCGroupRuleClientUri }}
                </th>
                <th class="primary--text">
                  {{ lanChar.ruleConfig.MCGroupRuleClientLimit }}
                </th>
                <th class="primary--text">
                  {{ lanChar.operateOperate }}
                </th>
              </tr>
            </thead>
            <tbody
              :update="uiUpdateCnt"
            >
              <tr
                v-for="(value, i) in groupInfo.rules"
                :key="i"
                :value="value"
                @dblclick="statusDialog('GroupRuleViewDialog', {val: value, mode: 'view'})"
              >
                <td class="text-left">
                  {{ value.Name }}
                </td>
                <td class="text-left">
                  {{ value.ServerTcp.Uri }}
                </td>
                <td class="text-left">
                  {{ value.ServerUdp.Uri }}
                </td>
                <td class="text-left">
                  {{ clientUris(value.Clients) }}
                </td>
                <td class="text-left">
                  <v-checkbox
                    v-model="value.ClientLimit"
                    color="secondary"
                    hide-details
                    disabled
                  >
                    <template v-slot:label>
                      <div>
                        {{ value.ClientLimit ? lanChar.checkStatusYes : lanChar.checkStatusNo }}
                      </div>
                    </template>
                  </v-checkbox>
                </td>
                <td class="text-right">
                  <v-btn
                    class="mr-0"
                    color="secondary"
                    min-width="30"
                    @click="confirmDialog(lanChar.ruleConfig.MCGroupRuleDelConfirm+value.Name+'?', 'Group Rule:'+JSON.stringify(value), delMCGroupRule, value)"
                  >
                    {{ lanChar.operateDel }}
                  </v-btn>
                  <v-btn
                    class="mr-0"
                    color="secondary"
                    min-width="30"
                    @click="statusDialog('GroupRuleViewDialog', {val: value, mode: 'update'})"
                  >
                    {{ lanChar.operateMod }}
                  </v-btn>
                </td>
              </tr>
            </tbody>
          </v-simple-table>

          <div class="py-2" />
          <v-tooltip
            top
          >
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                color="primary"
                dark
                v-bind="attrs"
                v-on="on"
                @click="statusDialog('GroupRuleViewDialog', {val: {}, mode: 'add'})"
              >
                <v-icon left>
                  mdi-plus
                </v-icon>
                <span>{{ lanChar.ruleConfig.MCGroupRuleAddButtonDescp }}</span>
              </v-btn>
            </template>
            <span>{{ lanChar.ruleConfig.MCGroupRuleAddButtonHint }}</span>
          </v-tooltip>

          <div class="py-6" />
        </material-card>
      </v-col>
      <v-col
        cols="12"
        md="4"
      >
        <app-card class="mt-4 text-center">
          <v-card-text class="text-center">
            <h4
              class="text-h4 mb-3 text--primary font-weight-medium"
              align="left"
            >
              {{ lanChar.ruleConfig.MCGroupRuleIntroTitle }}<br>
              <span class="text-caption">
                {{ lanChar.ruleConfig.MCGroupRuleIntroSuma }}
                <br><span class="text-caption font-weight-medium"> - {{ lanChar.ruleConfig.MCGroupRuleIntroName }}</span>
                {{ lanChar.ruleConfig.MCGroupRuleIntroNameDesp }}
                <br><span class="text-caption font-weight-medium"> - {{ lanChar.ruleConfig.MCGroupRuleIntrTcpServerUri }}</span>
                {{ lanChar.ruleConfig.MCGroupRuleIntroTcpServerUriDesp }}
                <br><span class="text-caption font-weight-medium"> - {{ lanChar.ruleConfig.MCGroupRuleIntroUdpServerUri }}</span>
                {{ lanChar.ruleConfig.MCGroupRuleIntroUdpServerUriDesp }}
                <br><span class="text-caption font-weight-medium"> - {{ lanChar.ruleConfig.MCGroupRuleIntroClientUri }}</span>
                {{ lanChar.ruleConfig.MCGroupRuleIntroClientUriDesp }}
                <br><span class="text-caption font-weight-medium"> - {{ lanChar.ruleConfig.MCGroupRuleIntroClientLimit }}</span>
                {{ lanChar.ruleConfig.MCGroupRuleIntroClientLimitDesp }}
              </span>
            </h4>
            <p
              class="info--text"
              align="left"
            >
              Note:
              <br>{{ lanChar.ruleConfig.MCGroupRuleIntroNote }}
            </p>
          </v-card-text>
        </app-card>
      </v-col>
    </v-row>
    <material-snackbar-tip
      v-model="snackbarDescp.snackbar"
      :type="snackbarDescp.snackbarType"
      :timeout="snackbarDescp.snackbarTimeout"
      v-bind="{
        bottom: true,
        right: true
      }"
      :text="snackbarDescp.snackbarContent"
    />
    <alert-dialog
      v-model="alert.dialog"
      :title="alert.title"
      :msg="alert.msg"
    />
    <confirm-dialog
      v-model="confirm.dialog"
      :title="confirm.content.title"
      :msg="confirm.content.msg"
      :callback="confirm.operate.callback"
      :input="confirm.operate.input"
    />
    <mc-group-rule-view-dialog
      v-model="status.groupRuleViewDialog"
      :input="status.operate.input"
    />
  </v-container>
</template>

<script>
  import globalDef from '@/util/globals'
  import lan from '@/util/lan-char'
  import * as mcAxios from '@/util/mcaxios'
  export default {
    name: 'McGroupRuleConf',

    data () {
      return {
        lanChar: lan.GetLan(),
        alertType: 'success',
        groupInfo: {
          rules: [],
          rulesBak: [],
        },
        uiUpdateCnt: 0,
        // snackbar data
        snackbarDescp: {
          snackbar: false,
          snackbarContent: 'snackbar content',
          snackbarTimeout: 2000,
          snackbarType: 'info',
        },
        // dialog data
        alert: {
          dialog: false,
          title: '',
          msg: '',
        },
        confirm: {
          dialog: false,
          content: {
            title: '',
            msg: '',
          },
          operate: {
            callback: null,
            input: null,
          },
        },
        status: {
          groupRuleViewDialog: false,
          operate: {
            input: null,
          },
        },
      }
    },
    computed: {
    },
    watch: {
      status: {
        handler (newValue, oldValue) {
          if (this.status.groupRuleViewDialog === false) {
            this.getGroupRules()
          }
        },
        deep: true,
      },
    },
    mounted () {
      this.getGroupRules()
    },
    created () {
    },
    methods: {
      tipInfo (level, content, timeout) {
        this.snackbarDescp.snackbarType = level
        this.snackbarDescp.snackbarContent = content
        this.snackbarDescp.snackbarTimeout = timeout
        this.snackbarDescp.snackbar = true
      },
      alertInfo (title, content) {
        this.alert.dialog = true
        this.alert.title = title
        this.alert.msg = content
      },
      confirmDialog (title, msg, operate, data) {
        this.confirm.content.title = title
        this.confirm.content.msg = msg
        this.confirm.operate.callback = operate
        this.confirm.operate.input = data
        this.confirm.dialog = true
      },
      statusDialog (name, data) {
        this.status.operate.input = data
        if (name === 'GroupRuleViewDialog') {
          this.status.groupRuleViewDialog = true
        }
      },
      clientUris (clients) {
        var out = ''
        for (const e of clients) {
          if (out.length > 60) {
            out += '...(' + this.lanChar.totalNumbers + clients.length + ')'
            break
          }
          out += (e.Uri + ';')
        }
        return out
      },
      getGroupRules () {
        const data = {
          request_type: 'mc group rules get',
          instance_id: 'instance_id',
          sequence_no: 1000,
        }
        mcAxios.axiosGetConfig(data)
          .then((res) => {
            if (res.data.status === true) {
              this.groupInfo.rules = []
              res.data.data.forEach((element, index) => {
                element.ClientLimit = false
                this.groupInfo.rules[index] = element
                this.groupInfo.rulesBak[index] = element
              })
              this.groupInfo.updateRules = true
            } else {
              console.log('getGroupRules get res fail')
            }
          })
          .catch((e) => {
            console.log('getGroupRules get fail: ', e)
          })
        this.groupInfo.isRuleAdding = false
      },
      delMCGroupRule (v) {
        if (String(v.Name) === '') {
          this.alertInfo(this.lanChar.alertInfoTitleInputError, this.lanChar.alertInfoParamError)
          return
        }
        const data = {
          request_type: 'mc group rule del',
          instance_id: 'instance_id',
          sequence_no: 1000,
          data: v,
        }

        mcAxios.axiosSetConfig(data)
          .then((res) => {
            if (res.data.status === true) {
              this.getGroupRules()
              this.tipInfo('success', this.lanChar.tipInfoOperateSuccess, globalDef.TIPINFO_DISPLAY_DURATION)
            } else {
              this.tipInfo('info', this.lanChar.tipInfoOperateRespFail + res.data.msg, globalDef.TIPINFO_DISPLAY_DURATION)
            }
          })
          .catch((e) => {
            this.tipInfo('error', this.lanChar.tipInfoOperateRequestFail + e, globalDef.TIPINFO_DISPLAY_DURATION)
          })
      },
    },
  }

</script>
